<template>
	<div>
		<nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/auth')">IP授权</div>
				<div class="BreadItem active">申请授权</div>
			</div>
		</nav>
		<div id="applyAuthPage" class="contentBox">
			<h3 class="center">填写授权申请信息</h3>
			<section class="standardFormData">
				<el-form ref="form"  label-width="125px">
					<el-form-item label="企业微信名" placeholder=''>
						<el-input v-model="standardObj.wx_name" size="small" style="width:256px" @keyup.enter.native="saveIpAuth()" placeholder="例如：junxiangguan"></el-input>
					</el-form-item>
					<el-form-item label="所属部门">
						<el-select v-model="standardObj.depart1" size="small" placeholder="请选择所属BG" @change="changeDepart()">
							<el-option :label="item.department_name" :value="item.id" v-for='(item,index) in departList'></el-option>
						</el-select>
						<el-select v-model="standardObj.dept_id" size="small" placeholder="请选择所属部门" class="mw-2">
							<el-option v-for='(item,index) in subDepartList' :label="item.department_name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="项目名称">
						<el-input v-model="standardObj.project_name" size="small" @keyup.enter.native="saveIpAuth()" placeholder="例如：QQ空间"></el-input>
					</el-form-item>
					<el-form-item class="moreChecked" label="使用范围">
							<!-- <el-checkbox-group v-model="standardObj.range_status" @change="handleCheckedUseRangChange">
								<el-checkbox  label="1" key="1">线上使用</el-checkbox>
								<el-checkbox  label="2" key="2">线下使用</el-checkbox>
							</el-checkbox-group> -->
							<div class="use_range_box flex align-center">
								<div class="use_range_checkbox  flex align-center">
									<input type="checkbox" id="lineIUp" value="1" v-model="standardObj.range_status">
									<label class="line lineIUp" for="lineIUp"><span></span></label>
									<label for="lineIUp">线上使用</label>&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div class="use_range_checkbox flex align-center">
									<input type="checkbox" id="lineDown" value="2" v-model="standardObj.range_status">
									<label class=" line lineDown" for="lineDown"><span></span></label>
									<label for="lineDown">线下使用</label>
									
								</div>
								
							</div>
							<!-- <el-checkbox v-model="standardObj.rang" value='0'>线上使用</el-checkbox>
							<el-checkbox v-model="standardObj.rang" value='1'>线下使用</el-checkbox> -->
					</el-form-item>
					<el-form-item label="用途描述">
							<textarea
								class="desc_text"
								placeholder="请详细说明申请资源授权用途与情况，以便管理员审核"
								v-model="standardObj.description">
							</textarea>
					</el-form-item>
				</el-form>
				<div class="form_footer">
					<button class="submitBtn" @click="saveIpAuth()">提交申请</button>
					<button class="returnBtn" @click="$router.push('/auth')">返回</button>
				</div>
			</section>
		</div>

		<div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
	</div>
	
</template>

<script>
import {deepCopy} from '@/utils/index.js'
export default {
	name:'applyAuth',
    data() {
      return {
        standardObj:{
			wx_name:'',
			project_name:"",
			dept:'',
			dept_id:'',
			dept_name:'',
			range_status:['1'],
			description:'',
			user_id:'',
			email:'',
			type:''
		},
		toastFlag:false,
		toastMsg:'',
		departList:[],
		subDepartList:[],
      }
    },
	mounted(){
		// this.getDepart()
		this.standardObj.user_id = this.$store.state.userInfo.user_id
		this.standardObj.email = this.$route.query.email
		this.standardObj.type = this.$route.query.type
	},
    methods: {
		getDepart(){
			let that = this;
			that.departList = [];
            this.$axios.get('/api/department/list').then((res)=>{
				if(res.data.data && res.data.data.length>0){
			  		that.departList = that.formDepart(res.data.data)
				}
            })
	  	},
		formDepart(arr){
			let that = this;
			arr.forEach((item,index)=>{
				item.label = item.department_name;
				item.value = item.id;
				if(item.children && item.children.length>0) {
					that.formDepart(item.children)
				}else{
					delete item.children
				}
			})
			return arr;
		},
		changeDepart(){	//切换部门
			let that = this;
			let id = this.standardObj.dept;
			this.standardObj.dept_id = '';
			this.departList.forEach((item,index)=>{
				if(item.id === id) {
					that.subDepartList = item.children;
					return;
				}
			})
		},
		handleCheckedUseRangChange(){
			console.log(this.standardObj.rang)
		},
		saveIpAuth() {	//保存申请
			let that = this;
			let dataObj = deepCopy(that.standardObj);
			dataObj.dept_id = 1;
			dataObj.dept_name = '社交用户体验设计部'
			let {wx_name,project_name,dept_id,range_status,description} = dataObj;
			if(!wx_name || !project_name || !dept_id || range_status.length<1){
				this.toastMsg = '请完善信息后再提交'
				this.toastFlag = true;
				setTimeout(function(){
					that.toastFlag = false
				},1000)
				return;
			}

			this.$axios.post('/api/ipAuth/apply',dataObj).then((res)=>{
				that.toastMsg = res.data.message;
				that.toastFlag = true;
				setTimeout(function(){
					that.toastFlag =false
				},1000)

				if(res.data.code == '200'){
					that.$router.push({
						path:'/authProgress'
					})
				}
			})
		}
    }
  }
</script>

<style lang="less" scoped>
	/deep/ .el-form-item__label{
		padding-right: 42px;
	}
	/deep/ .el-input__inner{
		border-radius: 22px;
		border-color: #E3E3E3;
	}
	/deep/ .el-form-item{
		margin-bottom: 35px;
	}
	/deep/ .el-form-item__label{
		font-size: 16px;
		color: #000;
		font-weight: 400;
	}
	/deep/.moreChecked .el-form-item__label{
		position: relative;
		&::after{
			content: '（可多选）';
			opacity: 0.19;
			font-weight: 400;
			font-size: 16px;
			color: #000000;
			margin-top: -12px;
			position: absolute;
			width: 100%;
			left: -34px;
			top: 33px;
		}
	}
	#applyAuthPage{
		h3{
			font-weight: 500;
			font-size: 32px;
			color: #000000;
			letter-spacing: 0;
			line-height: 32px;
			opacity: 0.95;
			margin-bottom: 80px;
		}
		
		.standardFormData{
			margin: 0 22%;
		}
	}
	.use_range_checkbox {
		label.line{
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 1px solid #666;
			border-radius: 50%;
			margin-right: 5px;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			span{
				width:10px ;
				height:10px ;
				background: #fff;
				border-radius: 50%;
			}
		}
		input{
			opacity: 0;
			display: none;
		}
		input:checked + label.line span{
			background: #9EE061;
		}
	}
	.desc_text{
		width: 805px;
		height: 154px;
		border: 1px solid #E3E3E3;
		border-radius: 16px;
		line-height: 22px;
		padding: 15px;
		outline: none;
		font-size: 16px;
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
	}
	.desc_text::-webkit-input-placeholder{
		color:#c0c4cc;
	}

	.form_footer{
		margin-top: 68px;
		button{
			height: 50px;
			border-radius: 25px;
			font-size: 20px;
		}
	}
	.submitBtn{
		width: 144px;
		background: #0064FF;
	}
	.returnBtn{
		width: 104px;
		background: #666666;
		margin-left: 40px;
	}
	
</style>
